<!-- 问诊大厅 -->
<template>
	<view>
		<!-- 1.标题 -->
		<uni-nav-bar title="问诊大厅" @clickLeft="goHome" left-icon="left" backgroundColor="#fff" color="#000"
			statusBar="true"></uni-nav-bar>
		<!-- 2.选项卡 -->
		<!-- <view class="tabControl">
			<view class="tab">
				<u-tabs :list="tabList" @click="click" :current="tabIndex" activeStyle='color: #0480FB'></u-tabs>
				<view class="line"></view>
			</view>
		</view> -->
		<view class="subsection">
			<scroll-view class="select-top-bar" :scroll-x="true">
				<view v-for="(item, index) in tabList" :key="index" @click="click(item)"
					class="select-top-bar-item" :class="{ 'selected': tabIndex == index }">
					<view class="top-bar-item-title">{{ item.name }}</view>
				</view>
			</scroll-view>
		</view>
		
		<view class="main">

			<scroll-view class="scrollheight" scroll-y="true" :style="{height:setcollapseheight() + 'px'}">
				<view v-if="postList.length>0">
					<view class="contentItem" v-for="(it,index) in postList" :key="index" @click="goInfo(it)">
						<view class="header">
							<view class="serialnumber"></view>
							<view class="title">
								{{it.invitationTitle}}
							</view>
							<view class="img1" v-if="it.topFlag">
								<view class="line"></view>
								置顶
								<view class="san">
								</view>
							</view>
							<view class="img2" v-if="it.choicenessFlag">
								<view class="line"></view>
								精
							</view>
						</view>
						<view class="container">
							<view class="img">
								<image src="@/static/index-message/V.png"></image>
							</view>
							<view class="text">
								{{it.invitationContent}}
							</view>
						</view>
						<view class="container">
							<view class="img3">
								<image src="@/static/index-message/jingliren.png"></image>
							</view>
							<view class="text" v-if="it.publisher">
								问帖人：{{it.publisher.nickName}}
							</view>
							<view class="text" v-else>
								问帖人：{{undefined}}
							</view>
						</view>
						<view class="container">
							<view class="img4">
								<image src="@/static/index-message/unit.png"></image>
							</view>
							<view class="text">
								问帖时间：{{it.createTime}}
							</view>
						</view>
						<view class="container">
							<view class="img4">
								<image src="@/static/index-message/liulanliang.png"></image>
							</view>
							<view class="text">
								浏览量：{{it.pageView}}
							</view>
						</view>
						<view>
							<view class="solution" v-if="it.resolveFlag">
								专家已解答
							</view>
							<view class="unsolution" v-else>
								专家未解答
							</view>
						</view>
					</view>
				</view>
				<view v-else>
					<view class="blank">
						<image src="@/static/blank.png" mode=""></image>
						<view class="nodata">
							暂无数据
						</view>
					</view>
				</view>
				<view class="bottom-ios-lineline">

				</view>
				<view class="bottom-ios-line">

				</view>
			</scroll-view>

		</view>
		<!-- 发布按钮 -->
		<view class="btn" v-if="!disableSendMsgFlag">
			<view class="item" @click="publishOpinion">
				<u-button type="primary" text="发布问诊" shape="circle" color="#0480FB"
					style="background: linear-gradient(270deg, #88ACFF 0%, #2165FF 100%);"></u-button>
			</view>
		</view>
		<!-- 底部tabbar -->
		<bottomTabar></bottomTabar>
		<view class="bottom-ios-line">

		</view>
	</view>
</template>

<script>
	import postApi from '@/api/socialized-servce/specialist-consultation/user-module/consultation-list/index.js'
	import bottomTabar from '../../components/bottom-tabaruser/index.vue'
	import navBar from '../../components/nav-bar/index.vue'
	import search from '../../components/search/index.vue'
	export default {
		components: {
			bottomTabar,
			navBar,
			search
		},
		data() {
			return {
				tabList: [],
				tabSwitch: '',
				tabIndex: 0,
				invitationTypeId: null,
				postList: [],
				disableSendMsgFlag: false
			}
		},
		mounted() {
			this.setcollapseheight()
			this.disableSendMsgFlag = uni.getStorageSync('disableSendMsgFlag')
		},
		async onShow() {
			// uni.setStorageSync('token',uni.getStorageSync('satoken'))
			// 获取帖子分类
			await this.getPostClassification()
			// 获取帖子
			await this.getPost()
		},
		methods: {
			// 获取帖子分类
			async getPostClassification() {
				let params = {
					name: '',
					serviceProviderNo: uni.getStorageSync('serviceProviderNo')
				}
				let res = await postApi.queryPostVariety(params)
				if(res.code === 200) {
					this.tabList = res.data
					if(res.data.length>0) {
						this.tabList.forEach((el,index) =>{
							el.id = index
						})
						let id = uni.getStorageSync('specialistConsultationInvitationTypeId')
						if(id) {
							this.invitationTypeId = id
							this.tabSwitch = res.data.filter(el => el.invitationTypeId === id)[0].name
							this.tabIndex = res.data.filter(el => el.invitationTypeId === id)[0].id
						} else {
							this.tabSwitch = res.data[0].name
							this.invitationTypeId = res.data[0].invitationTypeId
							this.tabIndex = 0
						}
					}
				}
			},
			// 选项卡切换
			click(item) {
				this.tabIndex = item.id
				this.tabSwitch = item.name
				this.invitationTypeId = item.invitationTypeId
				uni.setStorageSync('specialistConsultationInvitationTypeId',item.invitationTypeId)
				this.getPost()
			},
			// 获取帖子
			async getPost() {
				let params = {
					invitationTypeId: this.invitationTypeId,
					serviceProviderNo: uni.getStorageSync('serviceProviderNo')
				}
				let res = await postApi.queryPost(params)
				this.postList = res.data
			},
			//  设置可选择设施高度
			setcollapseheight() {
				let topheightone = uni.upx2px(136)
				// let newheight = this.customBar + topheightone
				let winHeight = 0
				uni.getSystemInfo({
					success: function(res) {
						winHeight = res.windowHeight
					}
				});
				let oldHeight = uni.upx2px(360)

				winHeight = parseInt(winHeight) - topheightone - oldHeight
				// #ifndef H5
				winHeight = winHeight - 20

				// #endif
				return winHeight
			},

			// 跳转到发布页面
			publishOpinion() {
				uni.redirectTo({
					url: '/subPage1/socialized-service/specialist-consultation/user-module/consultation-list/post-inquiry/post-inquiry'
				})
			},
			shareSearchList(e) {
				this.postList = e
			},
			goHome() {
				uni.switchTab({
					url: '/pages/socialized-service/selection-system/selection-system'
				})
			},
			goInfo(row) {
				let id = row.invitationId
				uni.redirectTo({
					url: `/subPage1/socialized-service/specialist-consultation/user-module/consultation-list/invitation-details/invitation-details?id=${id}`
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	// 选项卡
	.tabControl {
		// position: fixed;
		width: 100%;
		top: 136rpx;
		z-index: 99999;
		background-color: #F5F6FA;
	
		.tab {
			position: relative;
			.line {
				position: absolute;
				bottom: -2rpx;
				width: 100%;
				border-bottom: 2rpx solid #C9E4FF;
				z-index: 6;
			}
		}
		
		::v-deep .u-tabs__wrapper__nav__item {
			width: 25%;
			// padding: 0;
			// margin: 0 22rpx;
		}
		
		::v-deep .u-tabs__wrapper__nav__line {
			position: absolute;
			z-index: 9999999!important;
			height: 2rpx!important;
			width: 25%!important;
			bottom: 0!important;
			background-color: #0e7ae9!important;
			left: -10%;
		}
	}

	.main {
		position: relative;
		width: 100%;
		background: #F5F6FA;

		.blank {
			position: absolute;
			width: 100%;
			top: 50%;
			transform: translateY(-50%);
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			image {
				width: 200rpx;
				height: 200rpx;
			}

			.nodata {
				margin-top: 20rpx;
			}
		}


		.contentItem {
			position: relative;
			margin: 0 40rpx;
			margin-top: 16rpx;
			background-color: #FFFFFF;
			padding: 36rpx 12rpx 40rpx 12rpx;
			box-shadow: 0rpx 0rpx 12rpx 2rpx rgba(0, 0, 0, 0.05);
			border-radius: 16rpx 16rpx 16rpx 16rpx;

			.header {
				display: flex;
				justify-content: space-between;
				position: relative;

				.serialnumber {
					position: absolute;
					top: 8rpx;
					left: 0;
					width: 10rpx;
					height: 28rpx;
					// font-size: 28rpx;
					// font-weight: 400;
					// color: #000000;
					background-color: #91743E;
				}

				.title {
					width:70%;
					padding-left: 24rpx;
					font-size: 32rpx;
					font-weight: 500;
					color: #91743E;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
				// TODO:三角形
				.img1,.img2 {
					position: relative;
					top: -26rpx;
					width: 60rpx;
					height: 60rpx;
					text-align: center;
					color: #fff;
					background-color: #fa9f03;
					.line {
						position: absolute;
						top: -10rpx;
						width: 60rpx;
						height: 4rpx;
						background-color: red;
						border-radius: 6rpx;
						background-color: #fa9f03;
					}
					.san {
						position: absolute;
						top: 5rpx;
						border: 30rpx solid red;
						border-color: transparent transparent #fff transparent;
					}
				}
				.img2 {
					background-color: #ff7072;
					border-radius: 0 0 10rpx 10rpx;
					.line {
						background-color: #ff7072;
					}
				}
				
			}

			.container {
				display: flex;
				align-items: center;
				margin-left: 32rpx;
				margin-right: 10rpx;
				margin-top: 30rpx;
				font-size: 28rpx;
				font-family: Source Han Sans CN-Regular, Source Han Sans CN;
				font-weight: 400;
				color: #272727;

				// text-overflow: ellipsis;
				// display: -webkit-box;
				// -webkit-box-orient: vertical;
				// -webkit-line-clamp: 3;
				// overflow: hidden;
				.img {
					width: 35rpx;
					height: 30rpx;
				
					image {
						position: relative;
						z-index: 999;
						width: 35rpx;
						height: 30rpx;
					}
				}
				.img3 {
					width: 30rpx;
					height: 30rpx;
				
					image {
						position: relative;
						z-index: 999;
						width: 27rpx;
						height: 35rpx;
					}
				}
				.img4 {
					width: 35rpx;
					height: 26rpx;
				
					image {
						position: relative;
						z-index: 999;
						width: 35rpx;
						height: 26rpx;
					}
				}

				.text {
					padding-left: 24rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
			}

			.solution,
			.unsolution {
				position: absolute;
				width: 220rpx;
				height: 48rpx;
				right: 0;
				bottom: 0;
				font-size: 28rpx;
				font-family: Arial-Bold, Arial;
				font-weight: 400;
				color: #fff;
				text-align: center;
				line-height: 48rpx;
				background: linear-gradient(135deg, #00B2B2 0%, #00B790 100%);
				border-radius: 10rpx 0rpx 10rpx 0rpx;
			}

			.unsolution {
				background: linear-gradient(135deg, #FF6E6E 0%, #F73737 100%);
			}
		}

		.contentItem:last-child {
			// margin-bottom: 150rpx;

		}
	}

	.btn {
		z-index: 99;
		position: fixed;
		bottom: 180rpx;
		left: 50%;
		width: 340rpx;
		transform: translateX(-50%);
		height: 80rpx;
		padding-bottom: env(safe-area-inset-bottom);
	}

	.scrollheight {
		position: relative;
		box-sizing: border-box;
	}
		
	.subsection {
		padding: 0 32rpx;
		margin: 20rpx 0;

		.select-top-bar {
			width: 100%;
			justify-content: space-around;
			white-space: nowrap;
			display: flex;
			flex-direction: row;
			flex-wrap: nowrap;
			align-items: center;

			.select-top-bar-item {
				display: inline-block;
				margin-right: 20rpx;
				padding-bottom: 12rpx;
				min-width: 162rpx;
				height: 60rpx;
				font-size: 30rpx;

				&.selected {
					border-bottom: 4rpx solid #0e7ae9;
				}

				&:last-child {
					margin-right: 0;
				}

				.top-bar-item-title {
					min-width: 162rpx;
					height: 60rpx;
					line-height: 60rpx;
					text-align: center;
					padding: 0 10px;
				}
			}
		}
	}
</style>